<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"/>
	<meta content="telephone=no" name="format-detection">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	
	<!-- ios私有meta类 -->
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<meta name="apple-mobile-web-app-status-bar-style" content="black" />	
	
	<!--引用SUI Modle资源-->
	<link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.5.2/css/sm.min.css">
    <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.5.2/css/sm-extend.min.css">
	
		
	<!--引入本地文件-->
	<link rel="stylesheet" href="css/reset.css" type="text/css">
	<link rel="stylesheet" href="css/normalize.css" type="text/css">
	<link rel="stylesheet" href="css/order.css" type="text/css">
	
	<title>订单确认</title>
</head>
<body>
	<div class="page">
		<!--页面头部-->
		<header class="bar bar-nav">
			<a href="order_area.html" class="icon icon-left pull-left external"></a>
			<h1 class="title">订单详细</h1>
		</header>
		
		<!--订单页面 开始-->
		<div class="content">
			
			<!--收货栏 开始-->
			<div class="order-number">
				<div class="om-title">订单号：<span id="number">201430098151</span></div>
				<div style="height: 5rem; width: 100%;"></div>
				<div class="om-button"><a href="#" class="button button-dark delete-button" ">取消订单</a></div>
			</div>
			<!--收获栏 结束-->
			
			<!--商品清单 开始-->
			<div class="order-goodslist">
				<div class="og-title"><p>商品详细</p></div>
				<!--商品主部 开始-->
				<div class="og-main">
					<!--独立卡片-->
					<div class="card">
						<div class="card-content">
							<div class="list-block media-list">
								<ul>
									<li class="item-content">
										<div class="item-media">
											<img src="images/iphone_1.jpg" width="100" height="100">
            							</div>
										<div class="item-inner">
											<div class="item-title-row">
												<div class="item-title c-title">iPhone6 Plus A级成色</div>
              								</div>
              								<div class="item-subtitle c-subtitle">数量：<span>1</span></div>
           			 					</div>
          							</li>
        						</ul>
      						</div>
    					</div>
    					<div class="card-footer">
      						<div>￥ <b id="money">3000</b></div>
    					</div>
					</div>
					<!--独立卡片-->
					<!----------------------------------------------------------------->
				</div>
				<!--商品主部 结束-->
				
				<!--总额 开始-->
				<div class="og-amount">
					<p>订单总额：<span>￥<b id="amount">3000</b></span></p>
				</div>
				<!--总额 结束-->
			</div>
			<!--商品清单 结束-->
			
			
			
			<!--订单信息 开始-->
			<div class="order-information">
				<div class="oi-title"><p>收货信息</p></div>
				<div class="oi-main">
					<ul>
						<li>收货人：<span id="oi-name">许泽权</span></li>
						<li>手机：<span id="oi-phone">159*****833</span></li>
						<li>收货地址：<span id="oi-place">广州省.广州市.花都区.新华街道学府路1号</span></li>
						<li>送货时间：<span id="oi-time">送货时间不限</span></li>
						<li>客服电话：</span><span id="oi-service">15800132830</span><span class="icon icon-phone" onclick=""></li>
					</ul>
				</div>
			</div>
			<!--订单信息 结束-->
			
			<!--价格详细 开始-->
			<div class="order-price">
				<div class="op-title"><p>价格详细</p></div>
				<div class="op-main">
					<ul>
						<li>订单总件数：<span id="op-number">1</span></li>
						<li>商品总金额：<span>￥<span id="op-money">3000</span></span></li>
						<li>运费：<span>￥<span id="op-carriage">10</span>.00</span></li>
						<li>优惠劵：<span>￥-<span id="op-coupon">10</span>.00</span></li>
						<li>订单应付金额：<span class="opm-pay">￥<span id="op-pay">3000</span></span></li>
					</ul>
				</div>
			</div>
			<!--价格详细 结束-->
			
			<div style="background-color: #fff; height: 2rem;"></div>
	
		</div>
		<!--订单页面 结束-->
		
		<!--工具栏 开始-->
		<nav class="bar bar-tab tools" onclick="location.href='account.html'">
			<a class="tab-item">
				<span class="tab-label">结算</span>
			</a>
		</nav>
		<!--工具栏 结束-->
		
	</div>
	
	
	<!--引用SUI Modle资源-->
	<script type='text/javascript' src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
    <script type='text/javascript' src='//g.alicdn.com/msui/sm/0.5.2/js/sm.min.js' charset='utf-8'></script>
    <script type='text/javascript' src='//g.alicdn.com/msui/sm/0.5.2/js/sm-extend.min.js' charset='utf-8'></script>
	
	<script>
		$(document).on('click','.delete-button', function () {
			var x=document.getElementById("og-main");
			$.confirm('是否取消所有订单？', function () {	
  				x.remove(x.selectedIndex);
			});
		});
	</script>
	
</body>
</html>